{# Modal to display plain text content #}
<div class='modal fade' id='plainTextModal' tabindex='-1' role='dialog' aria-labelledby='plainTextModalLabel'>
  <div class='modal-dialog modal-lg' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        {# "placeholder" will be replaced with real file name by js upon data-action='toggle-modal' #}
        <h5 class='modal-title' id='plainTextModalLabel'>placeholder</h5>
        <button type='button' class='close' data-dismiss='modal' aria-label='{{ 'Close'|trans }}'>
          <span aria-hidden='true'>&times;</span>
        </button>
      </div>
      <div class='modal-body overflow-auto'>
        <div id='plainTextContentDiv'></div>
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-secondary' data-dismiss='modal'>{{ 'Close'|trans }}</button>
      </div>
    </div>
  </div>
</div>

{# UPLOADED FILES #}
<div id='filesDiv'>
  <div class='d-flex justify-content-between'>
    <div>{# necessary div for flex #}
      <h3 title='{{ 'Toggle visibility'|trans }}' data-action='toggle-next' data-opened-icon='fa-caret-down' data-closed-icon='fa-caret-right' data-toggle-target='uploadsDiv' data-toggle-target-extra='uploadsViewToggler' class='d-inline togglable-section-title' tabindex='0' role='button'>
        <i class='fas fa-caret-down fa-fw mr-2'></i>{% trans %}Attached file
        {% plural Entity.entityData.uploads|length %}
        Attached files
        {% endtrans %} (<span id='uploadsCount'>{{ Entity.entityData.uploads|length }}</span>)
      </h3>
    </div>

    {# id is used with data-toggle-target-extra #}
    <div id='uploadsViewToggler'>
      <button type='button' title='{{ 'Switch layout'|trans }}' aria-label='{{ 'Switch layout'|trans }}' class='btn hl-hover-gray p-1 lh-normal border-0 my-n1' data-action='toggle-uploads-layout' data-target-layout='{{ App.Users.userData.uploads_layout ? 0 : 1 }}'>
        <i class='fas fa-fw fa-list fa-flip-horizontal'></i>
        <i class='fas fa-fw fa-table-cells'></i>
      </button>
      <button type='button' title='{{ 'Show archived'|trans }}' aria-label='{{ 'Show archived'|trans }}' class='btn hl-hover-gray p-1 lh-normal border-0 my-n1 {{- App.Request.query.has('state') ? ' bgnd-gray' }}' data-action='toggle-uploads-show-archived'>
        <i class='fas fa-fw fa-box-archive'></i>
      </button>
    </div>
  </div>

  <div class='row mt-2 mx-0' id='uploadsDiv' data-count-for='uploadsCount' data-save-hidden='uploadsDiv'>
    {# ADD NEW FILE #}
    {% if mode == 'edit' %}
      <div class='col-md-4 col-sm-6'>
        {% if App.devMode -%}
          <!-- [html-validate-disable-next wcag/h32: no submit button for dropzone input] -->
        {%- endif %}
        <form action='api/v2/{{ Entity.entityType.value }}/{{ Entity.id }}/uploads' class='dropzone hl-hover-gray my-2 rounded' id='elabftw-dropzone' aria-label='file attachment form'></form>
      </div>
    {% endif %}

    {# TABLE LAYOUT (0) #}
    {% if App.Users.userData.uploads_layout == 0 and Entity.entityData.uploads %}
      {% include 'filter-input-snippet.html' with {'target': 'uploadsTable'} %}
      <div class='table-container'>
        <table class='table mt-3' aria-label='{{ 'Attached files'|trans }}' data-table-sort='true'>
          <thead>
            <tr>
              <th scope='col' class='col-4'>{{ 'Filename'|trans }}</th>
              <th scope='col'>{{ 'Comment'|trans }}</th>
              <th scope='col'>{{ 'Creation date'|trans }}</th>
              <th scope='col'>{{ 'Filesize'|trans }}</th>
              <th scope='col'>{{ 'Actions'|trans }}</th>
            </tr>
          </thead>
          <tbody id='uploadsTable'>
            {% for upload in Entity.entityData.uploads %}
              <tr class='countable' id='uploadDiv_{{ upload.id }}'>
                <td>
                  <button type='button' class='btn lh-normal hl-hover-gray p-1 mr-1' data-action='toggle-next' data-opened-icon='fa-caret-down' data-closed-icon='fa-caret-right' data-toggle-target='moreinfoDiv_{{ upload.id }}' aria-expanded='false' title='{{ 'More information'|trans }}' aria-label='{{ 'More information'|trans }}'>
                    <i class='fas fa-caret-right fa-fw'></i>
                  </button>
                  {% if upload.state == enum('Elabftw\\Enums\\State').Archived.value %}
                    {# use a span as title doesn't work directly on i element #}
                    <span title='{{ 'Archived'|trans }}'><i class='fas fa-box-archive mr-1'></i></span>
                  {% endif %}
                  <span id='upload-filename_{{ upload.id }}' class='text-break'>{{ upload.real_name }}</span>
                  <div class='mt-2' id='moreinfoDiv_{{ upload.id }}' hidden>
                    {% include 'upload-more-info.html' %}
                  </div>
                </td>
                {# COMMENT #}
                <td>{% include('upload-comment.html') %}</td>
                {# CREATED AT #}
                <td><span class='relative-moment' title='{{ upload.created_at }}'></span></td>
                {# FILESIZE #}
                <td>{{ upload.filesize|default('0')|formatBytes }}</td>
                {# ACTIONS #}
                <td>
                  {% if loop.first %}
                    <div id='last-uploaded-link' data-url='app/download.php?f={{ upload.long_name|e('url') }}' hidden></div>
                  {% endif %}
                  <a target='_blank' href='app/download.php?f={{ upload.long_name|e('url') }}&amp;name={{ upload.real_name|e('url') }}&amp;storage={{ upload.storage }}' rel='noopener' title='{{ 'Download'|trans }}' aria-label='{{ 'Download'|trans }}' class='btn hl-hover-gray p-1 mr-1'>
                    <i class='fas fa-download fa-fw'></i>
                  </a>
                  {% if not upload.immutable %}
                    {% if mode == 'edit' %}
                      {# EDIT FILENAME #}
                      <button type='button' title='{{ 'Edit filename'|trans }}' aria-label='{{ 'Edit filename'|trans }}' class='btn hl-hover-gray p-1 mr-1' data-action='rename-upload' data-id='{{ upload.id }}'>
                        <i class='fas fa-fw fa-pencil-alt'></i>
                      </button>
                      {# UPLOAD NEW VERSION #}
                      <button type='button' title='{{ 'Upload a new version of this file'|trans }}' aria-label='{{ 'Upload a new version of this file'|trans }}' class='btn hl-hover-gray p-1 mr-1' data-action='replace-upload' data-uploadid='{{ upload.id }}'>
                        <i class='fas fa-fw fa-sync-alt'></i>
                      </button>
                      {% include('upload-replace-form.html') %}
                    {% endif %}
                    {% if not Entity.isReadOnly %}
                      {# ARCHIVE #}
                      <button type='button' title='{{ 'Archive/Unarchive'|trans }}' aria-label='{{ 'Archive/Unarchive'|trans }}' class='btn hover-warning p-1 mr-1' data-action='archive-upload' data-uploadid='{{ upload.id }}'>
                        <i class='fas fa-box-archive'></i>
                      </button>
                      {# DESTROY #}
                      <button type='button' title='{{ 'Delete'|trans }}' aria-label='{{ 'Delete'|trans }}' class='btn hover-danger p-1 mr-1' data-action='destroy-upload' data-uploadid='{{ upload.id }}'>
                        <i class='fas fa-trash-alt'></i>
                      </button>
                    {% endif %}
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

    {# DEFAULT LAYOUT (1) #}
    {% else %}
      {% for upload in Entity.entityData.uploads %}
        {% set ext = upload.real_name|getExt %}
        <div class='col-md-4 col-sm-6 countable' id='uploadDiv_{{ upload.id }}'>
          {% if loop.first %}
            <div id='last-uploaded-link' data-url='app/download.php?f={{ upload.long_name }}' hidden></div>
          {% endif %}
          <div class='thumbnail box {{ upload.state == enum('Elabftw\\Enums\\State').Archived.value ? 'bg-light' }}' data-type='{{ Entity.entityType.value }}' data-id='{{ Entity.id }}' style='overflow: visible'>
            {% include('upload-dropdown-menu.html') %}
            {% if upload.state == enum('Elabftw\\Enums\\State').Archived.value %}
            <p class='mb-0'><i class='fas fa-fw fa-box-archive mr-1'></i>{{ 'Archived'|trans }}</p>
            {% endif %}

            {# IMAGES #}
            {% if ext matches '/(jpg|jpeg|png|gif|tif|tiff|pdf|eps|svg|heic)$/i' %}
              {# don't make the thumbnail clickable if it's a tif #}
              {% if ext matches '/(jpg|jpeg|png|gif|pdf|eps|svg|heic)$/i' %}
                <div class='text-center'>
                  <a class='text-break' target='_blank' href='app/download.php?f={{ upload.long_name|e('url') }}&amp;storage={{ upload.storage }}&amp;name={{ upload.real_name|e('url') }}'
                    {% if upload.real_name matches '/(jpg|jpeg|png|gif)$/i' %}data-fancybox='group' data-caption='{{ upload.real_name|e('html_attr') }}'{% endif %}
                    {% if upload.comment %}title='{{ upload.comment|e('html_attr') }}' data-caption='{{ upload.comment|e('html_attr') }}'{% endif %}
                  >
              {% endif %}
              {% set thumb_name = upload.long_name ~ '_th.jpg' %}
              {# old timestamp pdf don't have a thumbnail, so don't try to display one for them #}
              {% if ext matches '/(jpg|jpeg|png|gif|tif|tiff|pdf|eps|svg|heic)$/i' %}
                <div class='text-center'>
                  <img class='thumb img-thumbnail rounded' class='text-break' src='app/download.php?f={{ thumb_name|e('url') }}&amp;storage={{ upload.storage }}&amp;name={{ upload.real_name|e('url') }}' alt='thumbnail' />
                </div>
              {% else %}
                <i class='fas {{ ext2icon(ext) }} thumb rounded mx-auto d-block text-center'></i>
              {% endif %}
              {% if upload.real_name matches '/.(jpg|jpeg|png|gif|pdf|eps|svg|heic)$/i' %}
                  </a>
                </div>
              {% endif %}

            {# MOLECULES #}
            {% elseif ext in constant('Elabftw\\Elabftw\\Extensions::MOLECULE') %}
              {# build control dropdown to change the representation style #}
              <div style='padding-bottom: 5px' class='btn-group'>
                <button type='button'
                  class='btn btn-secondary btn-xs dropdown-toggle'
                  data-toggle='dropdown'
                  aria-haspopup='true'
                  aria-expanded='false'>{{ 'Style'|trans }} <span class='caret'></span>
                </button>

                <ul class='dropdown-menu clickable'>
                  {% set moldivId = '3Dmol_' ~ upload.id %}
                  <li class='dropdown-item'>
                    <span data-action='set-3dmol-style' data-divid='{{ moldivId }}' data-style='cartoon'>{{ 'Cartoon (proteins only)'|trans }}</span>
                  </li>
                  <li class='dropdown-item'>
                    <span data-action='set-3dmol-style' data-divid='{{ moldivId }}' data-style='cross'>{{ 'Cross'|trans }}</span>
                  </li>
                  <li class='dropdown-item'>
                    <span data-action='set-3dmol-style' data-divid='{{ moldivId }}' data-style='line'>{{ 'Line'|trans }}</span>
                  </li>
                  <li class='dropdown-item'>
                    <span data-action='set-3dmol-style' data-divid='{{ moldivId }}' data-style='sphere'>{{ 'Sphere'|trans }}</span>
                  </li>
                  <li class='dropdown-item'>
                    <span data-action='set-3dmol-style' data-divid='{{ moldivId }}' data-style='stick'>{{ 'Stick'|trans }}</span>
                  </li>
                </ul>
              </div>

              {# IMPORTANT: here the data-href has the storage first and the filename last or 3Dmol will get confused with the format #}
              <div class='viewer_3Dmoljs'
                data-href='app/download.php?storage={{ upload.storage }}&amp;f={{ upload.long_name|e('url') }}&amp;name={{ upload.real_name|e('url') }}'
                data-style="{{ ext == 'pdb' ? 'cartoon:color=spectrum' : 'stick' }}"
                data-backgroundcolor='0xffffff'
                id='3Dmol_{{ upload.id }}'>
              </div>

            {# DNA #}
            {% elseif ext in constant('Elabftw\\Elabftw\\Extensions::DNA') %}
              <div class='viewer-ove'
                data-href='app/download.php?f={{ upload.long_name|e('url') }}&amp;storage={{ upload.storage }}&amp;name={{ upload.real_name|e('url') }}'
                data-real-name='{{ upload.real_name|e('html_attr') }}'
                id='OVE_{{ upload.id }}'>
              </div>

            {# TEXT #}
            {% elseif ext matches '/(txt|md|json)$/i' %}
              <span class='icon-overlay eye-overlay'
                data-action='toggle-modal' data-target='plainTextModal' data-ext='{{ ext }}'
                data-storage='{{ upload.storage }}'
                data-path='{{ upload.long_name|e('html_attr') }}'
                data-name='{{ upload.real_name|e('html_attr') }}'>
                <i class='fas fa-file-alt thumb rounded mx-auto d-block text-center'></i>
              </span>

            {# SPREADSHEETS #}
            {% elseif ext in constant('Elabftw\\Elabftw\\Extensions::SPREADSHEET') %}
              {% if mode == 'edit' %}
                <span class='icon-overlay edit-overlay'
                  data-uploadid='{{ upload.id }}'
                  data-storage='{{ upload.storage }}'
                  data-path='{{ upload.long_name|e('html_attr') }}'
                  data-name='{{ upload.real_name|e('html_attr') }}'
                  data-action='xls-load-file'>
              {% else %}
              <span class='icon-overlay eye-overlay'
                    data-action='toggle-modal'
                    data-target='plainTextModal'
                    data-ext='table'
                    data-storage='{{ upload.storage }}'
                    data-path='{{ upload.long_name|e('html_attr') }}'
                    data-name='{{ upload.real_name|e('html_attr') }}'>
              {% endif %}
                <i class='fas fa-file-alt thumb rounded mx-auto d-block text-center'></i>
              </span>

            {# VIDEO #}
            {% elseif ext matches '/(mp4|webm)$/i' %}
              <div class='text-center'>
                <video controls width='300' preload='metadata'>
                  <source src='app/download.php?f={{ upload.long_name|e('url') }}&amp;storage={{ upload.storage }}&amp;name={{ upload.real_name|e('url') }}' type='video/{{ ext }}'>
                </video>
              </div>

            {# AUDIO #}
            {% elseif ext in constant('Elabftw\\Elabftw\\Extensions::AUDIO') %}
              <div class='text-center'>
                <audio controls>
                  <source src='app/download.php?f={{ upload.long_name|e('url') }}&amp;storage={{ upload.storage }}&amp;name={{ upload.real_name|e('url') }}' type='audio/{{ ext }}'>
                </video>
              </div>

            {# ANYTHING ELSE #}
            {% else %}
              <i class='fas {{ ext2icon(ext) }} thumb rounded mx-auto d-block text-center'></i>
            {% endif %}

            <div class='caption'>
              <i class='fas fa-fw fa-download mr-1'></i>
              <p class='d-inline'>
                <a id='upload-filename_{{ upload.id }}' class='text-break' href='app/download.php?f={{ upload.long_name|e('url') }}&amp;name={{ upload.real_name|e('url') }}&amp;storage={{ upload.storage }}' target='_blank' rel='noopener'>{{ upload.real_name }}</a>
                <span class='smallgray' style='display:inline'>
                  {% if upload.filesize %}
                    {{ upload.filesize|formatBytes }} -
                  {% endif %}
                  {{ upload.created_at }}
                </span>
              </p>
            <br>
            {% include('upload-comment.html') %}

            <div id='moreInfo_{{ upload.id }}' class='d-none'>
              {% include('upload-more-info.html') %}
            </div>
            </div>{# end div.caption #}
            {% include('upload-replace-form.html') %}
          </div>
        </div>
      {% endfor %}
    {% endif %}
  </div>
  <hr>
</div>{# #filesDiv #}
